<template>
    <div class="box">
        <header>
            <van-icon name="arrow-left" @click="skip" />
            <div>订单详情</div>
            <div></div>
        </header>
        <article v-for="(item) in list" :key="item.id">
            <div>
                    <div>
                        <div>
                            <img :src="item.menuImg" alt=""  width="50px" height="50px"/>
                            <div>
                                <h4 class="bold">{{ item.dishName}}</h4>
                                单价：{{ item.disPrice }}
                                数量: *{{ item.sum }}
                              <span v-if="item.remark==0" type="success" style="background-color: #3ac45c;color: white;">等待店家发货</span>
                              <span v-if="item.remark!=0" disabled size="mini" type="success" style="background-color: #3ac45c;color: white;" >店家已发货</span>
                                <!--<div class="f14">*{{ item.sum }}</div>-->
                            </div>
                        </div>
                            总价:{{ item.dishTotalPrice }}
                            <el-button v-if="item.productCode==1" disabled size="mini" type="warning" style="padding-right: -50px" @click="openReturnMoneyDraw(item)">已申请退款</el-button>
                            <el-button v-if="item.productCode==2" disabled size="mini" type="success" style="padding-right: -50px" @click="openReturnMoneyDraw(item)">已收货</el-button>
                            <el-button v-if="item.productCode==0"  size="mini" type="danger" style="padding-right: -50px" @click="openReturnMoneyDraw(item)">退款</el-button>

                            <el-button v-if="item.commentCode==1" size="mini" @click="outDraw(item)" type="success" style="margin-left: 16px;" >评论</el-button>
                            <el-button v-if="item.commentCode>1" disabled size="mini"  style="margin-left: 16px;">已评论</el-button>






                          <el-drawer
                              size="280px"
                              title="评论"
                              :visible.sync="drawer"
                               direction="btt"

                              >

                            <el-input v-model="comment" placeholder="请输入内容"  type="textarea" ></el-input>
                            <div style="text-align: center;padding-top: 10px" >
                              <el-button  size="mini" @click="sendComment()" type="success">发送</el-button>
                              <el-button size="mini" @click=" comment=''" type="danger">清空</el-button>
                            </div>


                          </el-drawer>
<!--                        </div>-->

                      <el-drawer
                          size="280px"
                          title="退款理由"
                          :visible.sync="returnMoneyDrawer"
                          direction="btt"
                      >

                        <el-input v-model="reason" placeholder="请输入内容"  type="textarea" ></el-input>
                        <div style="text-align: center;padding-top: 10px" >
                          <el-button  size="mini" @click="returnMoney()" type="success">发送</el-button>
                          <el-button size="mini" @click=" reason=''" type="danger">清空</el-button>
                        </div>


                      </el-drawer>

                    </div>
            </div>
        </article>


    </div>

</template>

<script>
    export default {
        name: "ordersDetails",
        data() {
            return {
                num: 0,
                //每个总价
                arr: [],
                list: [],
                ordersid:'',

              // 评论抽屉
              drawer: false,
              // 退款理由抽屉
              returnMoneyDrawer: false,
              // 退款信息表
              returnGoodsFrom:{},
              // 退款理由
              reason:'',

              // 评论信息
              comment:'',
              // 评论表单
              commentFrom: {},
            };
        },
        // 在这里获取数据
        created() {
            // 查询当前已支付的订单信息
            this.ordersid =this.$route.query.index
            console.log("===>",this.ordersid)
            this.ordersDetails(this.ordersid);
        },
        // 挂载方法
        methods: {
          openReturnMoneyDraw(item){
            this.returnMoneyDrawer = true;
            this.returnGoodsFrom=item;
          },

          returnMoney() {

            console.log(this.returnGoodsFrom);
            this.$http.post("/order/returnMoney?reason="+this.reason, this.returnGoodsFrom).then(res=>{
                if (res.data.code==2000){
                  this.$message.success("已申请退款，请去退款记录查看退款进程！");
                }else{
                  this.$message.error("退款失败,请联系管理员！")
                }
               this.reason='';
              this.ordersDetails(this.ordersid);
              this.returnMoneyDrawer=false;
            })
            // 价格 原因 订单号 支付宝流水号
           /* const url = `http://localhost:9090/alipay/return?totalAmount=${row.total}&alipayTraceNo=${row.alipayNo}&traceNo=${row.no}`
            this.request.get(url).then(res => {
              if(res.code === '200') {
                this.$message.success("退款成功")
              }  else {
                this.$message.error("退款失败")
              }
              this.load()
            })*/
          },

          // 评论抽屉
          outDraw(item){
            this.drawer = true;
            this.commentFrom=item;
          },

          // 发送评论
          sendComment(){

            this.commentFrom.comment=this.comment;

            this.$http.post("/order/sendComment",this.commentFrom).then(res=>{

              if(res.data.code===2000){
                this.$message.success("评论成功");
              }else {
                this.$message.success("评论失败");
              }
              this.comment='';
              this.ordersDetails(this.ordersid);
              this.drawer=false;
            })

          },


            // 查询已支付的订单详情
            ordersDetails(ordersid) {
                this.$http.get("/order/orderDetails?ordersid="+ordersid).then(res=>{
                    console.log(res)
                    this.list=res.data.data;
                    console.log(this.list)
                })
            },

            stretch(a) {
                if (this.list[a].message) {
                    this.list[a].message = false;
                } else {
                    this.list[a].message = true;
                }
            },
            skip() {
                this.$router.back();
            },
        },
        // 计算属性
        computed: {
            //计算总价

        },
        components: {},
    };
</script>

<style lang='less' scoped>
    .t14 {
        font-size: 0.14rem;
    }
    .bold {
        font-size: 0.16rem;
        font-weight: 600;
    }
    .f14 {
        margin-top: 0.1rem;
        color: #768989;
        font-size: 0.14rem;
    }
    .box {
        background-color: #f1f1f1;
        margin-bottom: 0.5rem;
        header {
            background-color: red;
            height: 46px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.18rem;
            color: #fff;
            font-weight: 600;
            i {
                width: 0.4rem;
                text-align: center;
            }
            :nth-child(3) {
                width: 0.4rem;
            }
        }
        article {
            background-color: #f1f1f1;
            padding: 0.1rem 0.1rem;
            width: 100%;
            box-sizing: border-box;
            > div {
                background-color: #fff;
                // 阴影
                // box-shadow: 0px 0px 10px #f40;
                width: 100%;
                height: 100%;
                border-radius: 0.1rem;
                // border: 0.01rem solid #f40;
                padding: 0.1rem;
                box-sizing: border-box;
                h3 {
                    font-size: 0.16rem;
                    font-weight: 600;
                    margin-bottom: 0.1rem;
                }
                .top {
                    > div {
                        margin-bottom: 0.1rem;
                        display: flex;
                        justify-content: space-between;
                        > div {
                            display: flex;
                        }
                        img {
                            width: 0.8rem;
                            margin-right: 0.1rem;
                        }
                    }
                }
                .marey {
                    text-align: right;
                    font-weight: 600;
                    padding-bottom: 0.1rem;
                    margin: 0.1rem 0;
                    border-bottom: 1px solid #ececec;
                }
                .bottom {
                    height: 0;
                    height: auto;

                    overflow: hidden;
                    > div {
                        display: flex;
                        margin-top: 0.1rem;
                        justify-content: space-between;
                        div {
                            text-align: right;
                            font-size: 0.14rem;
                        }
                        :nth-child(2) {
                            width: 2.5rem;
                        }
                    }
                }
                #message {
                    text-align: center;
                    #message_but {
                        display: inline-block;
                    }
                }
                .spin {
                    transform: rotateZ(180deg);
                }
            }
        }
    }
</style>

}
<!--
</script>

<style scoped>
</style>
-->
